import { List } from 'antd'
import React, { useEffect, useState } from 'react'
import Item from '../Item/Index'
import $ from 'jquery'

function Main ({ data, loading, onClick, isCurrent }) {
  const [column, setColumn] = useState(4)
  const [size, setSize] = useState(20)
  useEffect(() => {
    function resize () {
      const o = $('#arbitratorList')
      const w = o.width()
      const c = Math.floor(w / 479)
      setColumn(c)
      setSize(w / c * 20 / 479)
    }
    resize()
    window.addEventListener('resize', resize)
    return () => {
      window.removeEventListener('resize', resize)
    }
  }, [isCurrent])
  return (
    <div id='arbitratorList'>
      <List
        loading={loading}
        grid={{ gutter: 24, column }}
        dataSource={data} renderItem={(item) => {
          return (
            <List.Item>
              <Item data={item} size={size} onClick={onClick} />
            </List.Item>
          )
        }}
      />
    </div>
  )
}

export default Main
